---
title: Guidelines
redirect_from:
  - /components/heading/
---

<ReactExample exampleId="Heading-default" />

See also the general guidelines in [Typography](/foundation/typography/).

## When to use

- To structure the UI.
- To add a clear hierarchy.

## When not to use

- For decoration or emphasis (headings should represent semantic value)---use a [text](/components/text/text/).

## Component status

<ComponentStatus component="Heading" />

## Content structure

![1st level heading: opens every page; 2nd level heading: opens sections with grouped content; 3rd level heading: following the content hierarchy when more structure is needed.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:0%3A237)

## Content

### Stick to the hierarchy

Start with either a Title 1 or Display heading.
Then use Title 2 and so on.
Don't skip around in the hierarchy or you confuse users.

Choose a Display heading for screens with lots of content and Title 1 otherwise.
Generally, don't use both on the same screen.

<GuidelineImages>

<DoImage>

![Headings with (from the top) and h1, an h2, some text, an h2, and some text.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:62%3A5)

Respect the hierarchy.

</DoImage>

<DontImage>

![Headings with (from the top) and h1, an h4, some text, an h3, and some text.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:61%3A0)

Don't skip around and change the order of things with no reason.

</DontImage>

</GuidelineImages>

### Create semantic structure

Your beautiful visual hierarchy can be really helpful for those who can see it,
but remember that [not everyone is able to see it](/foundation/accessibility/).
Make sure everyone gets the benefit of your clearly structured content by using semantic tags
(such as starting with h1 and continuing).

## Look & feel

### Heading types

Headings are split based on size and appearance into seven different types.
These types represent a visual hierarchy from most important to least.

<ReactExample exampleId="Heading-types" />

There is also one additional color for use on very dark backgrounds.
This is the only color for headings other than colorHeading.

<ReactExample exampleId="Heading-inverted" />

### Use only a single color

While you might be tempted to make your headings stand out even more by using various colors,
resist the temptation.
Trust the visual style to make it clear what's important and what isn't.

In particular, don't use our product colors (such as <InlineToken name="paletteProductNormal" alternateName />)
to make headings more prominent.
Those colors are [reserved for actions](/foundation/color/#actionable-colors) users can take,
so using them in headings may confuse users.

<GuidelineImages>

<DoImage>

![A heading in the middle of text with everything in the same color.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:63%3A0)

Use the standard heading color.

</DoImage>

<DontImage>

![A heading in the middle of text with the heading in green.](fileId:fannvRpkOJK6uxxT33EKaa;nodeId:64%3A6)

Don't use other colors for emphasis.

</DontImage>

</GuidelineImages>
